import { Button, DatePicker, Input, NavBar } from 'antd-mobile'
import Icon from '@/components/Icon.jsx'
import './index.scss'
import classNames from 'classnames'
import { billListData } from '@/dictionary'
import { useNavigate } from 'react-router-dom'
import {useState} from "react";
import {useDispatch} from "react-redux";
import {addBillList} from "@/store/modules/billStore.jsx";
import dayjs from "dayjs";

const New = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const [billType, setBillType] = useState('pay')
  //收集金额
  const [money, setMoney] = useState(0)
  const moneyChange = (value) => {
    setMoney(value)
  }
  //选择useFor
  const [useFor, setUseFor] = useState('')
  //保存账单
  const saveBill = () => {
    //收集数据
    const data = {
      type:billType,
      money:billType === 'pay' ? -money : money,
      date,
      useFor
    }
    dispatch(addBillList(data))
  }
  //选择的时间
  const [date, setDate] = useState(new Date())
  //时间选择器的显示隐藏
  const [dateVisible, setDateVisible] = useState(false)
  //时间选择器的确认
  const dateConfirm = (date) => {
    setDate(date)
    setDateVisible(false)
  }
  return (
      <div className="keepAccounts">
        <NavBar className="nav" onBack={() => navigate(-1)}>
          记一笔
        </NavBar>

        <div className="header">
          <div className="kaType">
            <Button
                shape="rounded"
                className={classNames({'selected': billType === 'pay'})}
                onClick={() => setBillType('pay')}
            >
              支出
            </Button>
            <Button
                className={classNames({'selected': billType === 'income'})}
                shape="rounded"
                onClick={() => setBillType('income')}
            >
              收入
            </Button>
          </div>

          <div className="kaFormWrapper">
            <div className="kaForm">
              <div className="date">
                <Icon type="calendar" className="icon" />
                <span className="text" onClick={() => setDateVisible(true)}>{dayjs(date).format('YYYY | MM | DD')}</span>
                <DatePicker
                    className="kaDate"
                    title="记账日期"
                    max={new Date()}
                    value={date}
                    visible={dateVisible}
                    onCancel={() => setDateVisible(false)}
                    onConfirm={dateConfirm}
                />
              </div>
              <div className="kaInput">
                <Input
                    className="input"
                    placeholder="0.00"
                    type="number"
                    value={money}
                    onChange={moneyChange}
                />
                <span className="iconYuan">¥</span>
              </div>
            </div>
          </div>
        </div>

        <div className="kaTypeList">
          {billListData[billType].map(item => {
            return (
                <div className="kaType" key={item.type}>
                  <div className="title">{item.name}</div>
                  <div className="list">
                    {item.list.map(item => {
                      return (
                          <div
                              className={classNames(
                                  'item',
                                  {
                                    'selected': useFor === item.type
                                  }
                              )
                          }
                              key={item.type}
                              onClick={() => setUseFor(item.type)}
                          >
                            <div className="icon">
                              <Icon type={item.type} />
                            </div>
                            <div className="text">{item.name}</div>
                          </div>
                      )
                    })}
                  </div>
                </div>
            )
          })}
        </div>

        <div className="btns">
          <Button className="btn save" onClick={saveBill}>
            保 存
          </Button>
        </div>
      </div>
  )
}

export default New